<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/list.css">
  <!-- 插件的css样式 -->
  <link rel="stylesheet" href="./tools/jquery-pagination/pagination.css">
  <style>
    .breadcrumb {
      padding-left: 6px;
      padding-right: 6px;
    }

    .pag {
      width: 800px;
      margin: 20px auto;
    }

    .m-style .prev,
    .m-style .next {
      background: skyblue;
      color: red;
    }

    .m-style .active {
      background: pink;
    }
  </style>
</head>

<body>
  <h1>我是一个列表页面</h1>

  <div class="pagi"></div>

  <!-- 创建分页器标签 在标签中设定分页器插件样式 -->
  <div name="box" class="m-style pag"></div>

  <div class="container"></div>



  <script src="./js/tools.js"></script>
  <script src="./js/myAjax.js"></script>

  <!-- 插件的外部文件导入 是有顺序的 -->
  <script src="./tools/jquery.min.js"></script>
  <script src="./tools/jquery-pagination/jquery.pagination.js"></script>
  <script>
    // 获取标签对象
    const oDivContainer = document.querySelector('.container');

    // 定义变量储存 当前是第几页
    // 默认值是 1 
    let page = 1;

    // 定义变量 存储 每页数据数量
    // 当期那设定的是 4
    let pagesize = 4;

    // 调用函数 动态生成页面
    setPage();



    // 定义函数 动态生成页面
    async function setPage() {
      // 通过函数 获取浏览器地址栏数据
      // 通过 解构赋值 赋值给一个变量
      let { category } = myGetUrlValObj();
      console.log(category);
      // 根据 关键词 向 服务器发起请求
      const res = JSON.parse(await myPromise({
        url: 'http://localhost:8888/goods/list',
        type: 'get',
        data: {
          // 分类名称
          category: category,
          // 当前页数 默认显示 第一页
          current: page,
          // 每页显示数据数量 当前设定4
          pagesize: pagesize,
        }
      }));
      console.log(res);

      // 根据 res中 获取的商品信息内容 动态渲染生成页面

      // 动态渲染生成页面内容之前 先 清空div标签中的原始内容
      oDivContainer.innerHTML = '';

      // 生成 ul标签对象 
      const oUl = document.createElement('ul');

      // 根据 res中存储的内容 动态渲染生成 页面

      // 定义变量 存储 生成的li标签字符串
      let str = '';

      // 循环遍历 res.list 数组 
      res.list.forEach(item => {
        // item 就是 res.list数组中 存储的对象 
        // 也就是 当前商品的数据信息
        str += `
          <li class="list-item">
            <div class="panel panel-primary">
              <div class="panel-body">
                <ol class="breadcrumb">
                  <li><a href="#">分类名称  ${item.category} </a></li>
                </ol>
              </div>
              <div class="panel-footer">
                <div class="row">
                  <div class="">
                    <div class="thumbnail">
                      <img src="${item.img_big_logo}" alt="...">
                      <div class="caption">
                        <h3>${item.title}</h3>
                        <p>
                          <i class="glyphicon glyphicon-yen"></i>
                          <span>${item.current_price}</span><del style="font-size:20px;margin-left:10px;color:gray">${item.price}</del>
                        </p>
                        <p>
                          <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                          <a href="./detail.html?id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        
        `;
      })

      // 将 li字符串 写入 ul标签中
      oUl.innerHTML = str;

      // 将 ul标签写入 div标签中
      oDivContainer.appendChild(oUl);

      // 设定 分页器插件
      // 按照条件找到标签 设定分页器插件
      // 以 对象的形式 设定 分页器插件配置
      $('[name="box"]').pagination({
        pageCount: res.total,         //  设定 总页数 是 响应体res中 total 属性存储的数据
        current: page,                 //  设定 当前是第几页 
        showData: pagesize,            //  每页数据数量
        prevContent: '上一页',         //  上一页按钮 文字内容 
        nextContent: '下一页',         //  下一页按钮 文字内容 
        prevCls: 'prev',                 //  上一页按钮 类名 因为有默认样式 不推荐修改类名
        nextCls: 'next',                 //  下一页按钮 类名 因为有默认样式 不推荐修改类名
        activeCls: 'active',             //  选中标签 类名
        mode: 'fixed',                   //  显示 分页按钮模式是 固定模式
        count: 4,                        //  分页按钮数量  不算选中按钮的数量
        coping: true,                    //  是否 显示 首页 末页 分页按钮
        homePage: '首页',                //  设定 首页按钮 文字内容
        endPage: '末页',                 //  设定 首页按钮 文字内容
        isHide: true,                    //  总页数为 0 或者 1 时 隐藏 分页器插件
        // keepShowPN:true,                //  一直显示上一页 下一页 只有 显示方式 为 unfixed 不固定时 才起作用
        jump: true,                      //  跳转页功能
        callback: function (res) {       //  设定 分页器插件回调函数 点击 分页器按钮时 触发执行
          console.log(res);           //  回调函数 定义形参 分页器插件自动存储 实参 其中存储了一些函数方法
          console.log(res.getCurrent())   //  获取 点击的分页器按钮 对应的页数

          // 将 点击的分页器按钮 对应的页数 赋值给 变量储存
          page = res.getCurrent();

          // 根据 新的页数 再次 执行函数 动态渲染生成页面
          setPage();

        }
      })
    }




  </script>

</body>

</html>
<!-- 
    /*
  <li class="list-item">
        <div class="panel panel-primary">
          <div class="panel-body">
            <ol class="breadcrumb">
              <li><a href="#">一级分类</a></li>
              <li><a href="#">二级分类</a></li>
              <li class="active">三级分类</li>
            </ol>
          </div>
          <div class="panel-footer">
            <div class="row">
              <div class="">
                <div class="thumbnail">
                  <img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2898933862/O1CN01ExuNHp1eOq9TKoRh6_!!2898933862.jpg_580x580Q90.jpg_.webp" alt="...">
                  <div class="caption">
                    <h3>商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</h3>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>1234.56</span>
                    </p>
                    <p><a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> <a href="./detail.html" class="btn btn-danger" role="button">查看商品详情</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
  
  */
 -->